var path = require('path'),	
	webpack = require('webpack'),
	extractTextWebpackPlugin = require('extract-text-webpack-plugin');

function resolve(dir) {
    return path.join(__dirname,dir);
}

console.log('环境:',process.env.NODE_ENV);
var config = {
	entry:{
		main:'./src/main.js'
	},
	output:{
		path:path.join(__dirname,'/static/'),
		//让静态网页的背景图能通过相对路径引用到图片
		publicPath:'/static/',
		filename:'js/[name].js',
		//★打包异步请求的文件★
		chunkFilename:'js/[name].chunk.js'
	},
	module:{
		rules:[
			//vue 文件
			{
				test:/\.vue$/,
				loader:'vue-loader',
				options:{
					loaders:{
						less:extractTextWebpackPlugin.extract({
							use:['css-loader','postcss-loader','less-loader'],
							fallback:'vue-style-loader'
						}),
						scss:extractTextWebpackPlugin.extract({
							use:['css-loader','postcss-loader','sass-loader'],
							fallback:'vue-style-loader'
						}),
						css:extractTextWebpackPlugin.extract({
							use:['css-loader','postcss-loader','less-loader'],
							fallback:'vue-style-loader'
						})
					}
				}
			},
			//js 文件
			{
				test:/\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			//css 文件
			{
				test:/\.css$/,
				use:extractTextWebpackPlugin.extract({
					use:[{
							loader:'css-loader',
							options:{
								minimize:true
							}
						},'postcss-loader'],
					fallback:'style-loader'
				})
			},
			//less 文件
			{
				test:/\.less$/,
				use:extractTextWebpackPlugin.extract({
					use:['css-loader?minimize','postcss-loader','less-loader'],
					fallback:'style-loader'
				})
			},
			//scss 文件
			{
				test:/\.scss$/,
				use:extractTextWebpackPlugin.extract({
					use:['css-loader?minimize','postcss-loader','sass-loader'],
					fallback:'style-loader'
				})
			},
			//图片
			{
				test:/\.(jpg|jpeg|png|gif)$/,
				loader:'url-loader',
				options:{
					name:'img/[name].[hash].[ext]',
					limit:1024
				}
			},
			//字体
			{
				test:/\.(woff2|woff|svg|eot|ttf)\??.*$/,
				loader:'url-loader',
				//排除 icons 文件夹
				exclude: [resolve('src/icons')],
				options:{
					name:'font/[name].[hash].[ext]',
					limit:1024
				}
			},
			//svg图标
			{
				test: /\.svg$/,
		        loader: 'svg-sprite-loader',
		        options:{
		          symbolId:'icon-[name]'
		        },
				//只针对特定目录的 svg 处理
				include:[resolve('src/icons')]
			}
		]
	},
	plugins:[
		//定义开发环境
		new webpack.DefinePlugin({
			'process.env':{
				NODE_ENV:JSON.stringify(process.env.NODE_ENV),
				Mock:true,
				baseURL:JSON.stringify('/prefix')
			}
		}),
		new extractTextWebpackPlugin({
			filename:'css/[name].css',
			//★把所有的异步请求的 .vue 文件的 style 也打包如 主样式表★
			allChunks:true
		})
	],
	//配置路径转换，要使用 vue的<template></template>，需要引入 vue.esm.js
	resolve:{
		extensions: ['.js','.vue','.json'],
		alias:{
			'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
		}
	},
	devtool:'source-map',
	//配置
	devServer:{
		proxy:[
			//当前的 api 请求
			{
				context:['/prefix/'],
				// 后面无论是 80 还是 8080 都行,只要和 uri 保持一致即可
				target:'http://192.168.0.101:80/',
				pathRewrite:{
				    // 重写添加的接口请求前缀
				    '^/prefix':''
				},
				changeOrigin:true,
				secure: false
			}
		]	
	}
}

module.exports = config;